import 'package:flutter/material.dart';

class MyApp18 extends StatelessWidget {
  MyApp18({super.key});

//数据
  List navList = [
    {
      "imgUrl":
          "https://smart-shop.itheima.net/uploads/10001/20230320/58a7c1f62df4cb1eb47fe83ff0e566e6.png",
      "imgName": "icon-1.png",
      "link": {
        "id": "c37c2ee",
        "title": "分类页",
        "type": "PAGE",
        "param": {"path": "pages/category/index", "url": "pages/category/index"}
      },
      "text": "新品首发"
    },
    {
      "imgUrl":
          "https://smart-shop.itheima.net/uploads/10001/20230320/49c64dbbf449e9e8abfca314f92814bd.png",
      "imgName": "icon-2.jpg",
      "link": {
        "id": "c37c2ee",
        "title": "分类页",
        "type": "PAGE",
        "param": {"path": "pages/category/index", "url": "pages/category/index"}
      },
      "text": "居家生活"
    },
    {
      "imgUrl":
          "https://smart-shop.itheima.net/uploads/10001/20230320/8573fbc5e87e8a88827e905fca284604.png",
      "imgName": "icon-1.png",
      "link": null,
      "text": "服饰鞋包"
    },
    {
      "imgUrl":
          "https://smart-shop.itheima.net/uploads/10001/20230320/f01c5fc360f55c6053beec34913bc699.png",
      "imgName": "icon-1.png",
      "link": null,
      "text": "美食酒水"
    },
    {
      "imgUrl":
          "https://smart-shop.itheima.net/uploads/10001/20230320/b106e9bd9e0c8c779e7d77a84e92ed93.png",
      "imgName": "icon-1.png",
      "link": null,
      "text": "个护清洁"
    },
    {
      "imgUrl":
          "https://smart-shop.itheima.net/uploads/10001/20230320/fd3a573889671b924d89859f521c30c9.png",
      "imgName": "icon-1.png",
      "link": null,
      "text": "母婴亲子"
    },
    {
      "imgUrl":
          "https://smart-shop.itheima.net/uploads/10001/20230320/8f979924a4fd3b5f406b62a6b405ea32.png",
      "imgName": "icon-1.png",
      "link": null,
      "text": "运动旅行"
    },
    {
      "imgUrl":
          "https://smart-shop.itheima.net/uploads/10001/20230320/f7657720f79ea9f769c40608f369130e.png",
      "imgName": "icon-1.png",
      "link": null,
      "text": "数码家电"
    },
    {
      "imgUrl":
          "https://smart-shop.itheima.net/uploads/10001/20230320/36f09e32efc53e1e695210ca92c54ed8.png",
      "imgName": "icon-1.png",
      "link": null,
      "text": "宠物生活"
    },
    {
      "imgUrl":
          "https://smart-shop.itheima.net/uploads/10001/20230320/0cccdb31952fbf3bc0026efbe260e40e.png",
      "imgName": "icon-1.png",
      "link": null,
      "text": "每日抄底"
    }
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        //导航条
        appBar: AppBar(
          title: const Text('GrinView组件',
              style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                  color: Colors.white)),
          backgroundColor: Colors.pink,
          centerTitle: true,
        ),
        //主体区域
        //侧轴方向上的个数是固定的（无论是否旋转屏幕）
        body: GridView(
          padding: const EdgeInsets.all(10),
          //视图代理
          gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 90,
              childAspectRatio: 1,
              mainAxisSpacing: 10,
              crossAxisSpacing: 10),

          children: navList.map((item) {
            return Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: Colors.white,
              ),
              alignment: Alignment.center,
              child: Column(
                children: [
                  Image.network(
                    item['imgUrl'],
                    width: 50,
                    height: 50,
                  ),
                  const SizedBox(height: 5),
                  Text(item['text'])
                ],
              ),
            );
          }).toList(),
        ));
  }
}
